<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理:填空题 -->
<template>
  <div style="width:100% !important;padding:0 2vh;"
       id="id_container_completion">
    <el-container>
      <el-main>
        <el-form>
          <el-form-item label="课程编码"
                        style="color: #004ca7 ;">
            {{ kcbm?kcbm:"空"}}
          </el-form-item>
          <el-form-item label="试题题干">
            <el-input type="textarea"
                      v-model="dxdata.sttg"></el-input>
          </el-form-item>
          <el-form-item label="要填的空和正确答案">
            <br />
            <p class="daAnp">下面列出了填空的个数，您需要在填空上写上正确答案。如果您的题含有不止一个空，您可以点击下面的按钮增加更多的空。
              如果您的一个空可以有多个正确答案, 正确答案请用竖线 | 分开，例如：大象|象
              空旁边的分数表示该空答对时的得分， 如果留空， 则填空题任何一空错了， 整题的分数都为0，如果不留空，则哪一空回答对，
              则得那空的分</p>
          </el-form-item>
          <el-form-item>
            <el-row>
              <div v-for="(item) in dxdata.daxx"
                   :key="item.name">
                <el-row><label style="display:block;">（{{item.name}}）</label></el-row>
                <el-row>
                  <el-col :span=22>
                    <el-input v-model="item.content"></el-input>
                  </el-col>
                  <el-col :span=2
                          style="text-align:center;">
                  </el-col>
                </el-row>
              </div>
            </el-row>

            <el-row>
              <el-button @click="add"
                         size="mini"
                         type="warning"
                         icon="el-icon-circle-plus-outline"
                         style="width:100px;">增加填空</el-button>
              <el-button type="danger"
                         @click="dxdata.daxx.pop()"
                         size="mini"
                         icon="el-icon-delete"
                         circle></el-button>
            </el-row>
            <el-row>
              <el-checkbox-group v-model="dxdata.dashpftj"
                                 size="mini">
                <el-checkbox label="填空的答案无顺序要求"
                             style="border:1px solid #004ca7;"
                             border></el-checkbox>
                <el-checkbox label="按空得分，只要有一空答对就得分"
                             style="border:1px solid #004ca7;"
                             border></el-checkbox>
                <el-checkbox label="忽略大小写"
                             style="border:1px solid #004ca7;"
                             border></el-checkbox>
              </el-checkbox-group>
            </el-row>
          </el-form-item>
          <el-form-item label="可获得分数">
            <el-input v-model="dxdata.khdfs"></el-input>
          </el-form-item>
          <el-form-item label="题目解析">
            <el-input type="textarea"
                      v-model="dxdata.tmjx"></el-input>
          </el-form-item>
          <el-form-item label="试题章节">
            <el-row></el-row>
            <el-row>
              <el-col :span=20>
                <el-input v-model="questionModel.capter"></el-input>
              </el-col>
              <el-col :span=4
                      style="text-align:center;">
                <el-button @click="onBtnChoiceCapterClickHandler"
                           type="success">选择章节</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="试题难度"> <br />
            <el-radio-group v-model="dxdata.stndz">
              <el-radio label="简单"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">简单</el-radio>
              <el-radio label="一般"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">一般</el-radio>
              <el-radio label="难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">难</el-radio>
              <el-radio label="很难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">很难</el-radio>
              <el-radio label="较难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">较难</el-radio>
              <el-radio label="非常难"
                        size="mini"
                        style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">非常难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="适用培养层次">
            <el-input v-model="dxdata.pyccvalue"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <chapter-dialog :dialogVisible.sync="choiceCapterDialogVisible"
                    @save="onChoiceDialogSaveHandler"
                    @cancel="onChoiceDialogCancelHandler" />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import ChapterDialog from './chapterDialog'
export default {
  components: {
    'chapter-dialog': ChapterDialog,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    kcbm: {
      type: String,
    },
    kcmc: {
      type: String,
    },
    Textshow: {},
    wipedata: {},
  },

  data() {
    return {
      dxdata: {
        daxx: [
          { name: 'A', content: '' },
          { name: 'B', content: '' },
          { name: 'C', content: '' },
          { name: 'D', content: '' },
        ],
        zqda: [],
        khdfs: '',
        tmjx: '',
        stndz: '',
        pyccvalue: '',
        dashpftj: [],
      },
      testdaxx: [
        { name: 'A', content: '' },
        { name: 'B', content: '' },
        { name: 'C', content: '' },
        { name: 'D', content: '' },
        { name: 'E', content: '' },
        { name: 'F', content: '' },
        { name: 'G', content: '' },
        { name: 'H', content: '' },
      ],
      additem: [],
      rightKey: 2,
      rightKeyGroup: [],
      choiceCapterDialogVisible: false,
      questionModel: {
        capter: '',
      },
    }
  },
  methods: {
    add() {
      this.testdaxx[this.dxdata.daxx.length]
        ? this.dxdata.daxx.push(this.testdaxx[this.dxdata.daxx.length])
        : Message({ message: '超出选项上限', type: 'success' })
    },
    setDisplay: function () {
      if (this.visible) {
        document.getElementById('id_container_completion').style.display =
          'block'
      } else {
        document.getElementById('id_container_completion').style.display =
          'none'
      }
    },
    onBtnChoiceCapterClickHandler: function () {
      this.choiceCapterDialogVisible = true
    },
    onChoiceDialogSaveHandler: function (pVal) {
      Message({
        message: 'ChoicedCapter=' + pVal.label,
        type: 'error',
      })
      this.choiceCapterDialogVisible = false
      this.questionModel.capter = pVal.label
    },
    onChoiceDialogCancelHandler: function () {
      this.choiceCapterDialogVisible = false
    },
  },
  watch: {
    visible: {
      handler: function (p_val, p_oldval) {
        this.setDisplay()
      },
      deep: true,
    },
    wipedata() {
      this.dxdata.daxx = [
        { name: 'A', content: '' },
        { name: 'B', content: '' },
        { name: 'C', content: '' },
        { name: 'D', content: '' },
      ]
    },
    async Textshow() {
      let arr = []
      await this.dxdata.daxx.forEach((item) => {
        item = item.name + ':' + item.content
        arr.push(item)
      })
      //   let arr2=[]
      //    await this.dxdata.dashpftj.forEach((item) => {
      //     item = item.name + ':' + item.content
      //     arr.push(item)
      //   })
      console.log(arr)
      this.dxdata.zqda = arr.join('*-*-*')
      this.dxdata.dashpftj = this.dxdata.dashpftj.join('*-*-*')
      this.dxdata.daxx = 0
      this.$emit('dxtdata', this.dxdata)
    },
  },
  mounted: function () {
    this.setDisplay()
  },
}
</script>

<style lang="less" scoped>
.daAnp {
  color: #004ca7;
  line-height: 19px;
}
</style>

<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
</style>
